<template>
  <div class="SJStatistics">
       <div class='boxmain'>
           <el-form :inline="true"   size="mini" class="demo-form-inline">
          <!--日期-->
          <el-form-item label="日期">
             <el-date-picker
                      v-model="selTime"
                      type="daterange"
                      range-separator="-"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
               </el-date-picker>
          </el-form-item>
           <!--日期-->
          <el-form-item label="老师姓名">
             <el-select
                  v-model="value9"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入老师名字"
                  :remote-method="remoteMethod"
                  @change="selsectTecher"
                  >
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-form-item>
            <el-form-item>
          <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
           <el-button
            size="mini"
            icon="el-icon-refresh-right" @click='regest' >重置</el-button>
         </el-form-item>
         </el-form>
         <!--列表-->
        <el-table
            :data="arr"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                 <el-table
                     border
                     :data="props.row.info"
                    >
                  
                    <el-table-column align="center"
                      prop="examType"
                      label="考试类型"
                      >
                    </el-table-column>
                    <el-table-column align="center"
                      prop="editorNum"
                      label="编辑"
                      >
                    </el-table-column>
                    <el-table-column align="center"
                      prop="checkNum"
                      label="校验">
                    </el-table-column>
                    <el-table-column align="center"
                      prop="reviewNum"
                      label="审核">
                    </el-table-column>
                   
                  </el-table>
              </template>
            </el-table-column>
            <el-table-column align="center"
              label="老师ID"
              prop="id">
            </el-table-column>
            <el-table-column align="center"
              label="老师姓名"
              prop="name">
            </el-table-column>
            <el-table-column align="center"
              label="编辑"
              prop="editorNum">
            </el-table-column>
            <el-table-column align="center"
              label="校验"
              prop="checkNum">
            </el-table-column>
            <el-table-column align="center"
              label="审核"
              prop="reviewNum">
            </el-table-column>
          </el-table>

        <!--列表end-->

         <!--分页--> 
          <el-row class="page">
             <el-pagination background layout="prev, pager, next" :total="total"  :current-page.sync="pageNo"
              :page-size="pageSize"  @current-change='currchange'>
             </el-pagination>
         </el-row>  
           
           <el-row>
        
         </el-row>    
       </div>

      
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import __Config from '../../api/config';
export default {
  name: "SJStatistics",
  data() {
    return {
    
        arr:[],
        value: '',
        selTime: '', 
        token:this.$store.getters.token,
        options4: [],
        value9: "",//老师名字
        StarData:"",//开始时间结束时间
        endData:"",//开始时间结束时间
        pageNo:1,//页码
        pageSize:8,//数量
        teacherId:"",//老师id
        total:null,


    
      }
  },

  created() {
      this.onserch();
  },
  methods: {
   

       //查询
        onserch(){
         let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
          if(this.selTime==null){
            this.selTime= [];
            this.StarData="";
            this.endData="";
          }else{
            var times = this.selTime;
            this.StarData  = times[0];
            this.endData = times[1];
          }
            this.$axios({
              method:'get',
              url: __Config.api.joinshijuan,
              headers: {
                'Authorization': this.token //设置token 其中K名要和后端协调好
              },
              params:{
                  pageNo:this.pageNo,
                  pageSize:this.pageSize,
                  startTime:this.StarData,
                  endTime:this.endData,
                  teacherId:this.teacherId
              }
              }).then((res)=>{
                 
                  this.arr = res.data.data;
                  this.total = res.data.page.total;
                  loadingInstance.close();
              }).then((err)=>{
                  loadingInstance.close();
                   console.log(err)
              })

        },
        //老师选择
        selsectTecher(event){
         this.teacherId=event;
        },
        //老师查询
          remoteMethod(query) {   
            this.$axios({
              method:'get',
              url: __Config.api.teachers,
              headers: {
                'Authorization': this.token //设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                   this.options4=res.data.data;
              }).then((err)=>{
                  console.log(err)
              })

          },
          //
           currchange(e){
                this.pageNo=e;
                this.onserch();
            },
          //
            regest(){
                 this.selTime=[];
                 this.value9="";
                 this.onserch();
            }

  },
   mounted() {
      
    },
};
</script>
<style scoped>

.boxmain{
    width:95%;
    height:500px;
    background:#fff;
    margin:20px auto;
}

  .page{
    margin:30px 0px;
  }
</style>
